// @ts-nocheck
import "./index.less";
import { useEffect, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import MySearchBar from "@/components/MySearchBar";
import { PhoneFill } from "antd-mobile-icons";
import MapComponent from "@/components/MapComponent";
import { getGuide } from "../../service";
import { PageHeaderNew } from "@/components";
import { Form, Input } from "antd-mobile";

export default function Guide() {
  const navigate = useNavigate();
  const searchRef = useRef(null);
  const [form] = Form.useForm();
  const [searchValue, setSearchValue] = useState<undefined | string>();
  const [focused, setFocused] = useState(false);
  const [panelData, setPanelData] = useState([]);
  const [latLng, setLatLng] = useState([]);

  // useEffect(() => {
  //   const bubbleDiv = document.getElementById("Guide_content_bubble");
  //   bubbleDiv.addEventListener("focus", () => setFocused(true));
  //   bubbleDiv.addEventListener("blur", () => setFocused(false));
  // }, []);

  const getGuideList = async () => {
    try {
      const res = await getGuide();
      setPanelData(res?.data);
    } catch (error) {
      console.log(error);
    }
  };
  const formPosition = () => {
    let datas = JSON.parse(localStorage.getItem("address")) || {};
    let latlng = [datas?.latitude, datas?.longitude];
    setLatLng(latlng);
  };

  useEffect(() => {
    getGuideList();
    formPosition();
  }, []);

  return (
    <div className="Guide_contarnier">
      <div className="header-bg"></div>
      <PageHeaderNew title="社区云导览" goBack={() => navigate(-1)} />

      <div className="Guide_content">
        {/* 地图 */}
        <div className="Guide_content_map">
          <MapComponent isSearch={false} />
          <Form form={form} style={{ display: "none" }}>
            <Form.Item name="address" label="服务地址"></Form.Item>
          </Form>
        </div>

        {/* 底部面板 */}
        <div className="Guide_content_panel">
          <div className="gcp_search">
            <MySearchBar
              searchValue={searchValue}
              setSearchValue={setSearchValue}
              searchRef={searchRef}
              onFocus={() =>
                navigate("searchpage", {
                  state: { type: "all", latlng: latLng },
                })
              }
            />
          </div>
          <div className="gcp_content">
            {panelData?.length > 0 &&
              panelData?.map((item: any, index: number) => {
                return (
                  <div
                    className="gcp_meta"
                    key={`gcp_meta_${index}`}
                    onClick={() =>
                      navigate(`searchpage`, {
                        state: { type: item?.id, latlng: latLng },
                      })
                    }
                  >
                    <img
                      src={`/images/lifecircle/${item?.appTypeName}.png`}
                      alt=""
                    />
                    <div>{item?.appTypeName}</div>
                  </div>
                );
              })}
          </div>
        </div>

        {/* 悬浮气泡 */}
        {/* <div
          className="Guide_content_bubble"
          id="Guide_content_bubble"
          tabIndex={1}
        >
          <div className="gcb_left">
            <img src="/images/lifecircle/gridp.png" alt="" />
          </div>
          <div className="gcb_right">
            <div>孔毅</div>
            <div>{focused ? "中桥街道解放社区 - 第一网格" : "网格员"}</div>
          </div>
          {focused && (
            <div className="gcb_phone">
              <PhoneFill
                color="#ffffff"
                onClick={() => {
                  console.log("拨号");
                }}
              />
            </div>
          )}
        </div> */}
      </div>
    </div>
  );
}
